// 引入折线图组件
import 'echarts/lib/chart/line';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/legend';
import echarts from 'echarts/lib/echarts';

export default {
  data() {
    return {
      lineChartColorArray: ['#2898ff', '#ff5952'],
      lineChartInstanceObj: {}
    };
  },
  methods: {
    getLineChartInstance(id) {
      if (!this.lineChartInstanceObj[id]) {
        this.lineChartInstanceObj[id] = echarts.init(document.getElementById(id));
      }
      return this.lineChartInstanceObj[id];
    },
    clearLineChart(id) {
      const instance = this.getLineChartInstance(id);
      instance.clear();
    },
    showLineChartLoading(id) {
      const instance = this.getLineChartInstance(id);
      instance.showLoading({
        text: '加载中...',
        color: '#666',
        textColor: '#666',
        maskColor: 'rgba(255, 255, 255, 0.8)',
        zlevel: 0,
        showSpinner: false

      });
    },
    hideLineChartLoading(id) {
      const instance = this.getLineChartInstance(id);
      instance.hideLoading();
    },
    drawLineChart(id, seriesData, options = {}) {
      const instance = this.getLineChartInstance(id);
      // const myChart = echarts.init(document.getElementById(id));
      const defaultOptions = {
        toolTipPosition: 'top', // 默认在chart顶部显示tooltip
        showTooltipOutCb: null, // 外部显示tooltip的回调
        yAxisLabelFixed: 2, // y轴坐标值小数位
        axisPointerType: 'line'
      };
      const _options = { ...defaultOptions, ...options };
      const len = seriesData[0].data.length;
      const series = seriesData.map((data, index) => {
        const seriesOptions = {
          ...data,
          type: 'line',
          symbol: 'circle',
          symbolSize: 2,
          itemStyle: {
            normal: {
              color: this.lineChartColorArray[index],
            }
          },
          lineStyle: {
            color: this.lineChartColorArray[index],
            width: 2
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(40, 162, 255, 0.1)'
              }, {
                offset: 1,
                color: 'rgba(72,152,246,0.1)'
              }])
            }
          }
        };
        return seriesOptions;
      });

      const chartOptions = {
        title: {
          text: ''
        },
        legend: {
          show: false
        },
        grid: {
          left: 2,
          right: '2',
          top: _options.toolTipPosition === 'top' ? 42 : 10, // 头部用来放tooltip
          bottom: '15',
          containLabel: true
        },
        xAxis: {
          type: 'time',
          axisLine: {
            lineStyle: {
              color: '#E6E6E6'
            }
          },
          interval: seriesData[0].data[len - 1][0],
          axisTick: {
            interval: (index, value) => { // 类目轴有效
              return index == 0 || index == len - 1;
            },
          },
          axisLabel: {
            color: '#999',
            fontSize: 10,
            align: 'left',
            showMinLabel: true,
            showMaxLabel: true,
            padding: [5, 0, 0, 0],
            formatter(value, index) {
              const date = echarts.format.formatTime('yyyy-MM-dd', value);
              return index === 0 ? date : `{rightText|${date}}`;
            },
            rich: {
              rightText: {
                color: '#999',
                fontSize: 10,
                align: 'right',
                width: 0
              }
            },
          },
          splitLine: {
            show: false
          },
          splitNumber: 2,
        },
        yAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: '#999',
            fontSize: 10,
            rotate: 0.1,
            formatter(value, index) {
              if (_options.type === 'asset' || _options.type === 'HEFund') {
                return parseFloat(value).toFixed(4);
              }
              return `${value.toFixed(options.yAxisLabelFixed)}%`;
            }
          },
          splitLine: {
            lineStyle: {
              color: '#E6E6E6'
            }
          },
          splitNumber: 5,
          min(value) {
            return value.min;
          }
        },
        tooltip: {
          trigger: 'axis',
          triggerOn: 'mousemove',
          axisPointer: {
            type: options.axisPointerType,
            axios: 'y',
            snap: true,
            label: {
              show: true,
              fontSize: 10,
              // height: 28,
              margin: 8,
              padding: [4, 3, 3, 3],
              backgroundColor: '#1F6AFF',
              shadowBlur: 0,
              formatter(params) {
                const { axisDimension, value } = params;
                if (axisDimension === 'x') {
                  const date = echarts.format.formatTime('MM-dd', params.value);
                  return date;
                }
                return `${value.toFixed(options.yAxisLabelFixed)}%`;
              }
            },
            lineStyle: {
              type: 'dashed',
              color: '#d9ecfa'
            },
            crossStyle: {
              color: '#d9ecfa'
            }
          },
          position: [0, 0],
          backgroundColor: '#d9ecfa',
          padding: 0,
          extraCssText: 'width:100%;transition-duration:0s;z-index:99;',
          formatter(params) {
            if (_options.toolTipPosition === 'out' && _options.showTooltipOutCb) {
              _options.showTooltipOutCb(params[0].data);
              return;
            }

            const value = parseFloat(params[0].data[1]).toFixed(4);
            const time = echarts.format.formatTime('yyyy-MM-dd', params[0].data[0]);

            const fontSize = parseFloat(document.documentElement.style.fontSize);
            if (_options.type == 'HEFund') {
              return `
              <div style="font-size:${(11 / 50) * fontSize}px;color:#333;line-height:${(32 / 50) * fontSize}px;padding:0 5px;">
                <p style="float:left;">${time}</p>
                <p style="text-align:right;">
                  <span style="margin-right:3px;">${seriesData[0].name}</span><span style="color:red;">${value}</span>
                </p>
              </div>`;
            }
            const change = params[0].data[2];
            let changeHtml = `<span>${(parseFloat(change) * 100).toFixed(2)}%</span>`;
            if (change > 0) {
              changeHtml = `<span class="rise">+${(parseFloat(change) * 100).toFixed(2)}%</span>`;
            }
            if (change < 0) {
              changeHtml = `<span class="drop">${(parseFloat(change) * 100).toFixed(2)}%</span>`;
            }
            return `
            <div style="font-size:${(11 / 50) * fontSize}px;color:#333;line-height:${(32 / 50) * fontSize}px;padding:0 5px;">
              <p style="float:left;">${time}</p>
              <p style="text-align:right;">
                <span style="margin-right:3px;">${seriesData[0].name}</span><span style="color:red;margin-right:20px">${value}</span>
                <span style="margin-right:3px;">日涨跌幅</span>${changeHtml}
                </p>
            </div>`;
          }
        },
        series
      };
      // myChart.setOption(chartOptions);
      instance.setOption(chartOptions);
      instance.hideLoading();
    }
  }
};